
<html><HEAD>
<LINK REL=STYLESHEET HREF="default.css" TYPE="text/css">
<TITLE>
Moving and resizing controls </TITLE>
</HEAD>
<BODY>

<!-- Header -->
<p class="ancestor" align="right"><A HREF="pbugp104.htm">Previous</A>&nbsp;&nbsp;<A HREF="pbugp106.htm" >Next</A>
<!-- End Header -->
<A NAME="X-REF298661156"></A><h1>Moving and resizing controls </h1>
<A NAME="TI2791"></A><p>There are several ways to move and resize controls in the
Layout view.</p>
<A NAME="TI2792"></A><h2>Moving and resizing controls using the mouse</h2>
<A NAME="TI2793"></A><p>To move a control, drag it with the mouse to where you want
it.</p>
<A NAME="TI2794"></A><p>To resize a control, select it, then grab an edge and drag
the edge with the mouse. </p>
<A NAME="TI2795"></A><h2>Moving and resizing controls using the keyboard</h2>
<A NAME="TI2796"></A><p>To move a control, select it, then press an arrow key to move
it in the corresponding direction.</p>
<A NAME="TI2797"></A><p>To resize a control, select it, and then     press:<A NAME="TI2798"></A>
<ul>
<li class=fi>Shift+Right Arrow to make the control wider</li>
<li class=ds>Shift+Left Arrow to make the control narrower</li>
<li class=ds>Shift+Down Arrow to make the control taller</li>
<li class=ds>Shift+Up Arrow to make the control shorter
</li>
</ul>
</p>
<A NAME="TI2799"></A><h2>Aligning controls using the grid</h2>
<A NAME="TI2800"></A><p>The Window painter provides a grid to help you align controls
at design time. You can use the grid options to:<A NAME="TI2801"></A>
<ul>
<li class=fi>Make controls snap to a grid
position when you place them or move them in a window</li>
<li class=ds>Show or hide the grid when the workspace displays</li>
<li class=ds>Specify the height and width of the grid cells
</li>
</ul>
</p>
<A NAME="TI2802"></A><p><img src="images/proc.gif" width=17 height=17 border=0 align="bottom" alt="Steps"> To use the grid:</p>
<ol><li class=fi><p>Choose Design&gt;Options from the
menu bar and select the General tab.</p></li>
<li class=ds><p>Do one or more of the following:<A NAME="TI2803"></A>
<ul>
<li class=fi>Select Snap to Grid to align controls with a horizontal and
vertical grid when you place or move them</li>
<li class=ds>Select Show Grid to display the grid in the Layout
view</li>
<li class=ds>Specify the width of each cell in the grid in pixels
in the X text box</li>
<li class=ds>Specify the height of each cell in the grid in pixels
in the Y text box
</li>
</ul>

                      </p></li></ol>
<br><p><img src="images/note.gif" width=17 height=17 border=0 align="bottom" alt="Note"> <span class=shaded>Hiding the grid</span> <A NAME="TI2804"></A>Window painting is slower when the grid is displayed, so you
might want to display the grid only when necessary. </p>
<A NAME="TI2805"></A><h2>Aligning controls with each other</h2>
<A NAME="TI2806"></A><p>You can align selected controls by their left, right, top,
or bottom edges or their horizontal or vertical centers.</p>
<p><img src="images/note.gif" width=17 height=17 border=0 align="bottom" alt="Note"> <span class=shaded>PainterBars in the Window painter</span> <A NAME="TI2807"></A>The Window painter has three PainterBars. PainterBar1 includes
buttons that perform operations that are common to many painters,
including save, cut, copy, paste, and close. PainterBar2 includes
buttons used with the Script view. PainterBar3 contains buttons
that manipulate the display of the selected control or controls.
The tools used to align, resize, and adjust the space between controls
are on a drop-down toolbar on PainterBar3. </p>
<A NAME="TI2808"></A><p><img src="images/proc.gif" width=17 height=17 border=0 align="bottom" alt="Steps"> To align controls:</p>
<ol><li class=fi><p>Select the control whose position you want
to use to align the others.</p><p>PowerBuilder displays handles around the selected control.</p></li>
<li class=ds><p>Press and hold the Ctrl key and click the controls
you want to align with the first one.</p><p>All the selected controls have handles on them.</p></li>
<li class=ds><p>Select Format&gt;Align from the menu bar,
or select the Layout drop-down toolbar in PainterBar3.</p></li>
<li class=ds><p>Select the dimension along which you want to align
the controls.</p><p>PowerBuilder aligns all the selected controls with the first
control selected.</p></li></ol>
<br><A NAME="TI2809"></A><h2>Equalizing the space between controls</h2>
<A NAME="TI2810"></A><p>You can manually move controls by dragging them with the mouse.
You can also equalize the space around selected controls using the
Format menu or the Layout drop-down toolbar.</p>
<A NAME="TI2811"></A><p><img src="images/proc.gif" width=17 height=17 border=0 align="bottom" alt="Steps"> To equalize the space between controls:</p>
<ol><li class=fi><p>Select the two controls whose spacing is
correct.</p><p>To do so, select one control, then press and hold Ctrl and
click the second control.</p></li>
<li class=ds><p>Press Ctrl and click to select the other controls
whose spacing should match that of the first two controls.</p></li>
<li class=ds><p>Select Format&gt;Space from the menu bar,
or select the Layout drop-down toolbar in PainterBar3.</p></li>
<li class=ds><p>Select horizontal or vertical spacing.</p></li></ol>
<br><A NAME="TI2812"></A><h2>Equalizing the size of controls</h2>
<A NAME="TI2813"></A><p>Using the Format menu or the Layout drop-down toolbar, you
can adjust selected controls so that they are all the same size
as the first control selected. You might do this if you have several
SingleLineEdit or CommandButton controls on a window.</p>
<A NAME="TI2814"></A><p><img src="images/proc.gif" width=17 height=17 border=0 align="bottom" alt="Steps"> To equalize the size of controls:</p>
<ol><li class=fi><p>Select the control whose size is correct.</p></li>
<li class=ds><p>Press and hold Ctrl and click to select the other
controls that should be the same size as the first control.</p></li>
<li class=ds><p>Select Format&gt;Size from the menu bar,
or select the Layout drop-down toolbar in PainterBar3.</p></li>
<li class=ds><p>Select the size for width, height, or both width
and height.</p></li></ol>
<br>
